﻿@charset "utf-8";

/* 全局标记一致性定义 */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*,body{padding:0px;	margin:0px;color:#222;font-family:"微软雅黑";}
@font-face{font-family:electronicFont;src:url(ds-digit.TTF)}
body{background:#000d4a url(bg.jpg) center top;background-size:cover;color:#666;font-size:.1rem;}
li{list-style-type:none;}
table{}
i{margin:0px;padding:0px;text-indent:0px;}
img{border:none;max-width:100%;}
a{text-decoration:none;color:#399bff;}
a.active,a:focus{outline:none!important;text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{padding:0;margin:0}
a:hover{color:#06c;text-decoration:none!important}
.clearfix:after,.clearfix:before{display:table;content:" "}
.clearfix:after {clear:both}

/*谷哥滚动条样式*/
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
 ::-webkit-scrollbar-thumb {background-color:#5bc0de}
 ::-webkit-scrollbar-track {background-color:#ddd}

/** 科技动态效果 */
.canvas{position:absolute;width:100%;left:0;top:0;height:99%;z-index:1;}

/** 预加载效果 */
.loading{position:fixed;left:0;top:0;font-size:18px;z-index:-10;width:100%;height:100%;background:#1a1a1c;text-align:center;}
.loadbox{position:absolute;width:160px;height:150px;color:#aaa;left:50%;top:50%;margin-top:-100px;margin-left:-75px;}
.loadbox img{margin:10px auto;display:block;width:40px;}

/** 头部 */
.head{height:1.05rem;background:url(head_bg.png) no-repeat center center;background-size:100% 100%;position:relative;z-index:100;}
.head h1{color:#fff;text-align:center;font-size:.4rem;line-height:.8rem;}
.head h1 img{width:1.5rem;display:inline-block;vertical-align:middle;margin-right:.2rem}

/** 日期时间 */
.datetime{position:absolute;left:.3rem;top:0;line-height:.75rem;}
.datetime img{width:.37rem;display:inline-block;vertical-align:middle;}
.datetime span{color:rgba(255,255,255,.7);font-size:.18rem;padding-right:.1rem;}

/** 欢迎文本 */
.welcome{position:absolute;right:.3rem;top:0;line-height:.75rem;}
.welcome img{width:.37rem;display:inline-block;vertical-align:middle;}
.welcome span{color:rgba(255,255,255,.7);font-size:.18rem;padding-right:.1rem;}

/** 图表高度和宽度 */
.chart{height:calc(100% - 0.4rem);}
.chart.right{width:calc(100% - 0.2rem);}

/** 主体 */
.mainbox{padding:.1rem .1rem 0rem .1rem;}
.mainbox>ul{}
.mainbox>ul>li{float:left;padding:0 .1rem}

.mainbox>ul>li{width:30%}
.mainbox>ul>li:nth-child(2){width:40%;padding:0}


/** 盒子 */
.box{position:relative;border:1px solid rgba(25,186,139,.17);padding:0 .2rem .4rem .15rem;background:rgba(255,255,255,.04) url(line.png);background-size:100% auto;margin-bottom:.15rem;z-index:10;}
.box>.title{font-size:.3rem;color:#fff;text-align:center;line-height:.9rem;}
.box>.title img{width:.6rem;display:inline-block;vertical-align:middle;margin-bottom:.1rem;}
.box>.title span{color:#fff;font-size:.25rem;padding-right:.1rem;margin-left:.2rem;line-height:.6rem;}

/** 子盒 */
.box-inner{position:relative;display:inline-block;width:1.56rem;height:.8rem;margin:.14rem .09rem;border:1px solid rgba(25,186,139,.17);padding:0 .2rem .4rem .15rem;background:rgba(255,255,255,.04) url(line.png);background-size:30% auto;z-index:10;}
.box-inner:before,
.box-inner:after{position:absolute;width:.1rem;height:.1rem;content:"";border-top:2px solid #02a6b5;top:0;}
.box-inner:before{border-left:2px solid #02a6b5;left:0;}
.box-inner:after{border-right:2px solid #02a6b5;right:0;}

.box-inner img{position:absolute;top:.1rem;left:.08rem;width:.5rem;}
.box-inner .prev{position:absolute;top:-0.09rem;left:.41rem;color:#fff;font-size:.2rem;padding-right:.1rem;margin-left:.2rem;line-height:.6rem;}
.box-inner .next{position:absolute;top:.19rem;left:.41rem;color:#fff;font-size:.22rem;padding-right:.1rem;margin-left:.2rem;line-height:.6rem;}

/** 盒子底角 */
.box-foot{position:absolute;bottom:0;width:100%;left:0;}
.box-foot:before,
.box-foot:after{position:absolute;bottom:0;width:.1rem;height:.1rem;content:"";border-bottom:2px solid #02a6b5;}
.box-foot:before{border-left:2px solid #02a6b5;left:0;}
.box-foot:after{border-right:2px solid #02a6b5;right:0;}

/** 方块 */
.rect{position:relative;margin-bottom:.15rem;border:1px solid rgba(25,186,139,.17);padding:0 .2rem .4rem .15rem;background:rgba(255,255,255,.04) url(line.png);background-size:100% auto;z-index:10;}
.rect:before,
.rect:after{position:absolute;top:0;width:.1rem;height:.1rem;content:"";border-top:2px solid #02a6b5;}
.rect:before{border-left:2px solid #02a6b5;left:0;}
.rect:after{border-right:2px solid #02a6b5;right:0;}
.rect>.title{position:absolute;left:.1rem;font-size:.3rem;color:#fff;text-align:left;line-height:.6rem;}
.rect>.title img{width:.3rem;display:inline-block;vertical-align:middle;}
.rect>.title span{color:#fff;font-size:.22rem;padding-right:.1rem;margin-left:.1rem;line-height:.6rem;}
.rect>.desc{position:absolute;right:.15rem;font-size:.12rem;color:#fff;text-align:left;line-height:.6rem;}
.rect>.desc>span{color:#00d887;font-size:.25rem;padding:.01rem;}
.rect>.box-right{position:absolute;right:.13rem;bottom:.18rem;color:rgba(255,255,255,.6);font-size:.15rem;}

/** 中上 */
.bar{border:1px solid rgba(25,186,139,.17);padding:.2rem .2rem .4rem .15rem;background:rgba(255,255,255,.04) url(line.png);background-size:100% auto;position:relative;margin-bottom:.15rem;z-index:10;}
.bar:before,
.bar:after{position:absolute;width:.3rem;height:.1rem;content:"";}
.bar:before{border-left:2px solid #02a6b5;left:0;top:0;border-top:2px solid #02a6b5;}
.bar:after{border-right:2px solid #02a6b5;right:0;bottom:0;border-bottom:2px solid #02a6b5;}

.bar-inner{position:relative;display:inline-block;width:1.5rem;height:1.3rem;margin:0 .48rem;z-index:10;}
.bar-inner>.title{width:100%;color:#fff;text-align:center;font-size:.26rem;line-height:.6rem;}
.bar-inner>.number{margin-top:.15rem;width:100%;height:.55rem;background:rgba(9,35,96,.5) url(line.png);text-align:center;color:#00d887;font-size:.50rem;font-family:electronicFont;font-weight:bold;padding:.05rem;}

/** 中间球体转动 */
.ball,.ball1,.ball2{ position:absolute;opacity:.5}
.ball{width:4.13rem;top:.3rem;left:1.8rem;z-index:1;}
.ball1{width:4.63rem;z-index:2;top:.03rem;left:1.5rem;animation:ball1 15s infinite linear;}
@keyframes ball1{from {transform:rotate(0deg);}to {transform:rotate(359deg);}}
.ball2{width:4.63rem;top:.03rem;left:1.55rem;z-index:3;opacity:0.2;animation:ball2 10s infinite linear;}
@keyframes ball2{from {transform:rotate(0deg);}to {transform:rotate(-359deg);}}
